<template>
  <div>
    <van-nav-bar
      fixed="true"
      placeholder="true"
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-notice-bar scrollable :text="this.goods.title" />
    <van-cell v-bind:value="goods.description" />
    <div>
      <ul v-for="(url, index) in goods.urls" :key="index">
        <van-image width="20rem" height="20rem" :src="url" />
      </ul>
    </div>
    <van-panel title="租金/天" :status="this.goods.price"></van-panel>
    <van-panel title="押金/元" :status="this.goods.guarentee"></van-panel>
    <van-panel title="总金额/元" :status="this.goods.totalPrice"></van-panel>
    <van-panel title="总天数/天" :status="this.goods.days"></van-panel>
    <van-panel title="买家地址" :status="this.goods.fahuoaddress"></van-panel>
    <van-panel title="卖家地址" :status="this.goods.jihuiaddress"></van-panel>
    <van-button v-if="queren" type="primary" @click="sumque">确认收货</van-button>
    <van-form v-if="jihui" @submit="sumhui">
      <van-field
        v-model="wuliu"
        name="物流单号"
        label="物流单号"
        placeholder="请输入物流单号"
        :rules="[{ required: true, message: '请填写物流单号' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">我要寄回</van-button>
      </div>
    </van-form>

    <van-steps
      :active="active"
      direction="vertical"
      active-icon="success"
      active-color="#38f"
    >
      <van-step>买家下单</van-step>
      <van-step>商家发货</van-step>
      <van-step>买家提货</van-step>
      <van-step>买家寄回</van-step>
      <van-step>卖家提货</van-step>
    </van-steps>
    <div style="height: 10vh"></div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Order",
  data() {
    return {
      wuliu: "",
      queren: false,
      jihui: false,
      goods: {
        title: "",
        id: 0,
        status: 0,
        description: "",
        price: 0,
        totalPrice: 0,
        days: 0,
        guarentee: 0,
        urls: [],
        fahuoaddress: "",
        jihuiaddress: "",
      },
      value: "",
      active: 0,
    };
  },
  components: {},
  created() {
    this.axios({
      method: "GET",
      url: "/aapi/order",
      params: {
        id: this.$store.state.dingdanid,
      },
    }).then((response) => {
      this.goods = response.data;
      this.active = this.goods.status;
      if (this.active === 1) {
        this.queren = true;
      }
      if (this.active === 2) {
        this.jihui = true;
      }
      console.log(this.goods);
    });
  },
  methods: {
    sumhui() {
      let formData = new FormData();
      formData.append("id", this.$store.state.dingdanid);
      formData.append("wuliu", this.wuliu);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.axios.post("/aapi/jihui", formData, config).then((res) => {
        this.jihui = false;
        this.goods.status = 3;
        this.active = 3;
      });
    },
    sumque() {
      if(this.active == 1){
        this.axios({
        method: "GET",
        url: "/aapi/queren",
        params: {
          id: this.$store.state.dingdanid,
        },
      }).then((response) => {
        this.goods.status = 2;
        this.jihui = true;
        this.active = 2;
        console.log(this.active)
          console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++");
        //确认收货后，卖家钱包添加租出天数*每日单价的钱
        console.log("确认收货");
        let formData = new FormData();
        formData.append("id", this.$store.state.dingdanid);
        console.log(this.$store.state.dingdanid);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        this.axios.post("/aapi/maijiajiaqian", formData, config).then((res) => {
          console.log("+++++++++++++++++++++++++++++++++++++++");
          this.queren = false;
        })
      })
    }
        if(this.active == 3){
          let formData = new FormData();
        formData.append("id", this.$store.state.dingdanid);
        console.log(this.$store.state.dingdanid);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        this.axios.post("/aapi/queren2", formData, config).then((res) => {
          console.log("+++++++++++++++++++++++++++++++++++++++");
          this.active = 4;
          this.queren = false;
        });
        }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.price-style {
  color: brown;
  font-size: 1.2rem;
}
</style>
